import React from 'react';
import PropTypes from 'prop-types';

export default class Counter extends React.Component {
    static propTypes = {
        count: PropTypes.number.isRequired,
        increment: PropTypes.func.isRequired,
        decrement: PropTypes.func.isRequired,
        user:PropTypes.object.isRequired
    }

    constructor(props){
        super(props);
        this.stepRef=React.createRef();
    }

    // 增加计数器
    increment() {
        // 触发的是redux中的reducer
        const step=this.refs.stepRef.value*1;

        this.props.increment(step);
    }
    // 较少计数器
    decrement() {
        // 触发的是redux中的reducer
        const step=this.refs.stepRef.value*1;

        this.props.decrement(step);
    }
    render() {
        return <div style={{ padding: 10 }}>

            <span style={{ fontSize: 20 }}>计数器:{this.props.count}</span>
            &nbsp;&nbsp;
            {/* 每次增加或减少的步长 */}
            <select ref="stepRef" style={{padding:'4px 10px'}}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            &nbsp;&nbsp;
            <button onClick={() => this.increment()}>增加</button>
            &nbsp;&nbsp;
            <button onClick={() => this.decrement()}>减少</button>
            <hr/>
            <h1>{this.props.user.name}</h1>
            <h1>{this.props.user.gender}</h1>

        </div>
    }
}
